import React, { useEffect, useState } from 'react'
import Layout from './Layout'
import { useSelector, useDispatch } from 'react-redux'
import { Col, Empty, Row, Space } from 'antd'
import FilterByCatgory from './FilterByCatgory'
import FilterByPrice from './FilterByPrice'
import { filter_products } from '../../store/actions/filter'
import ProductItem from './ProductItem'
import { Button } from 'antd/lib/radio'

function Shop() {
  
  const [filters, setFilter] = useState({category: [], price: []})
  const [skip, setSkip] = useState(0)
  const dispatch = useDispatch()
  const {data, size} = useSelector(state => state.filter)
  // const {data, size} = state
  // useEffect(() => {console.log(states)},[])

  // 测试子组件传递过来的数据
  // useEffect(() => {console.log(filters)},[filters])
  // eslint-disable-next-line
  useEffect(() => {dispatch(filter_products({filters, skip}))},[filters, skip])
  useEffect(() => {setSkip(0)},[filters])

  const handlemore = () =>{
    setSkip(skip + 4)
  }
  return (
    <Layout title='拉勾严选-商城列表' subTitle='请选购~'>
      <Row>
        <Col span='4'>
          <Space size='middle' direction='vertical'>
            <FilterByCatgory handleFilter={filter => setFilter({...filters, category: filter})} />
            <FilterByPrice handleFilter={filter => setFilter({...filters, price: filter})} />
          </Space>
        </Col>
        <Col span='20'>
         <Space size='large' direction='vertical'>
            <Row gutter={[10, 16]}>
              {data.map(product => (
                <Col span='6' key={product._id}>
                  <ProductItem product={product} />
                </Col>
              ))}
            </Row>
            <Row>
              {size >= 4? <Button type="primary" onClick={handlemore}>加载更多</Button>: <Empty /> }
            </Row>
         </Space>
        </Col>
      </Row>
    </Layout>
  )
}  
  
export default Shop
